<template>
  <div class="grid gap-[10px] grid-cols-1">
    <a
      v-for="(item, index) in categoryJson"
      :key="index"
      :href="getTargetUrl(`/categoryDetail?categoryType=${item.categoryType}`)"
      @click="handleClickTrack({ category: item.categoryName })"
      class="grid grid-cols-3 p-[20px] cursor-pointer items-center gap-[20px] rounded-[10px] bg-no-repeat! bg-top-left! bg-[size:100%_100%]!"
      :style="{ background: `url(${categoryBgImg})` }"
    >
      <XMImg
        isAutoImg
        :src="item.categoryIcon"
        class="w-[200px] aspect-square rounded-[16px] bg-[#00000050] border-[2px] border-solid border-[#ffffff] shadow-lg"
      />
      <div class="text-[20px] font-bold col-span-2 line-clamp-1 text-[var(--xm-color)]">
        {{ item.categoryName }}
      </div>
    </a>
    <a
      :href="getTargetUrl('/category')"
      v-if="showMore"
      class="grid cursor-pointer grid-cols-3 p-[20px] items-center gap-[20px] rounded-[10px] bg-no-repeat! bg-top-left! bg-[size:100%_100%]!"
      @click="handleClickTrack({ category: 'More Category' })"
      :style="{ background: `url(${categoryBgImg})` }"
    >
      <XMImg
        :src="categoriesIcon"
        class="w-[200px] p-[10px] bg-white aspect-square rounded-[16px] border-[2px] border-solid border-[#ffffff] shadow-lg"
      />
      <div class="text-[20px] font-bold col-span-2 line-clamp-1 text-[var(--xm-color)]">
        More Category
      </div>
    </a>
    <XMAd
      v-for="(item, index) in categoryDisplayList"
      v-if="openAd"
      :key="index"
      :gamDefineSlot="item"
      class="col-[1/-1]"
      :style="{ gridRow: (index + 1) * 4 }"
    />
  </div>
</template>

<script lang="ts" setup>
import categoryBgImg from "~/public/img/categoryBgImg.jpg";
import categoriesIcon from "~/public/img/categoriesIcon.png";
import { useConfigStore } from "~/composables/useConfigStore";
import { useGA } from "~/composables/useGA";
import type { ClickTrackType } from "./type";

const { config, hostName } = useConfigStore();
const { gamConfig: { categoryDisplayList = [] } = {} } = config.value;
const { showMore = false, openAd = false } = defineProps<{
  /** 是否显示更多按钮 */
  showMore?: boolean;
  /** 是否开启广告 */
  openAd?: boolean;
}>();
const { trackEvent } = useGA();
const { data: categoryJson } = await useFetch<CategoryItemType[]>("/api/getCateroty", {
  method: "POST",
  body: {
    hostName,
    count: showMore ? 10 : 15,
  },
});

/**
 * 点击分类类型上报事件
 * @param clickTrackType
 */
const handleClickTrack = (clickTrackType: ClickTrackType) => {
  const { category } = clickTrackType;
  trackEvent({
    eventName: "Click_Category",
    params: {
      Category: category,
      Subzone: "page",
    },
  });
};
</script>

<style scoped></style>
